<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/resources/template/template.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"                    
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:pe="http://primefaces.org/ui/extensions"
                xmlns:hr="http://java.sun.com/jsf/composite/autocomplete">


    <ui:define name="content">

        <h:panelGroup >
            <h:form  >

                <h:panelGrid columns="2" >
                    <p:panel header="Detail" >

                        <h:panelGrid columns="2"  >
                            <h:outputLabel value="Component"/>
                            <h:outputLabel value="#{staffPaySheetComponentAllPerformanceAllowanceController.paysheetComponent.name}"/>


                            <h:outputLabel value="From"/>                            
                            <p:calendar  navigator="true" value="#{staffPaySheetComponentAllPerformanceAllowanceController.fromDate}" pattern="dd MM yyyy">
                                <f:ajax execute="@this" render="#{p:component('frm')}" event="dateSelect"/>
                            </p:calendar>
                            <h:outputLabel value="To"/>
                            <p:calendar navigator="true" value="#{staffPaySheetComponentAllPerformanceAllowanceController.toDate}" pattern="dd MM yyyy"/>

                            <h:outputLabel value="Value"/>
                            <p:inputText id="val" autocomplete="off"  value="#{staffPaySheetComponentAllPerformanceAllowanceController.staffPaySheetComponentValue}"/>

                            <p:commandButton  value="Add" action="#{staffPaySheetComponentAllPerformanceAllowanceController.save}" onclick="onSubmitButton();">

                            </p:commandButton>
                            <p:commandButton value="Clear" action="#{staffPaySheetComponentAllPerformanceAllowanceController.makeNull}" ajax="false" onclick="onSubmitButton();" />

                        </h:panelGrid>                      
                    </p:panel>

                    <p:panel id="staff" header="Staff List">
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Employee : "/>
                            <hr:completeStaff value="#{staffController.reportKeyWord.staff}"/>
                            <h:outputLabel value="Department : "/>
                            <hr:department value="#{staffController.reportKeyWord.department}"/>
                            <h:outputLabel value="Institution : "/>
                            <hr:institution value="#{staffController.reportKeyWord.institution}"/>
                            <h:outputLabel value="Staff Category : "/>
                            <hr:completeStaffCategory value="#{staffController.reportKeyWord.staffCategory}"/>
                            <h:outputLabel value="Designation : "/>
                            <hr:completeDesignation value="#{staffController.reportKeyWord.designation}"/>
                            <h:outputLabel value="Roster : "/>
                            <hr:completeRoster value="#{staffController.reportKeyWord.roster}"/>
                        </h:panelGrid>
                        <p:commandButton ajax="false" 
                                         value="Fill Staff"
                                         action="#{staffController.createActiveStaffTable()}"
                                         onclick="onSubmitButton();"/>
                        <p:dataTable  value="#{staffController.staffWithCode}" 
                                      var="s" scrollable="true"
                                      filteredValue="#{staffController.filteredStaff}"     
                                      scrollHeight="300"                                   
                                      rowKey="#{s.id}" 
                                      selection="#{staffController.selectedList}"
                                      rowIndexVar="i">

                            <p:column  selectionMode="multiple" >                            
                            </p:column>

                            <p:column >
                                #{i+1}
                            </p:column>
                            <p:column headerText="Staff Code" >
                                <h:outputLabel value="#{s.code}"/>
                            </p:column>
                            <p:column headerText="Staff" >
                                <h:outputLabel value="#{s.person.nameWithTitle}"/>
                            </p:column>

                            <p:column headerText="Grade" >
                                <h:outputLabel value="#{s.grade.name}"/>                           
                            </p:column>

                            <p:column headerText="Category">
                                <h:outputLabel value="#{s.staffCategory.name}"/>
                            </p:column>
                            <p:column headerText="Designtion">
                                <h:outputLabel value="#{s.designation.name}"/>
                            </p:column>
                            <p:column headerText="Institution">
                                <h:outputLabel value="#{s.workingDepartment.institution.name}"/>
                            </p:column>
                            <p:column headerText="Department">
                                <h:outputLabel value="#{s.workingDepartment.name}"/>
                            </p:column>
                            <p:column headerText="Roster">
                                <h:outputLabel value="#{s.roster.name}"/>
                            </p:column>

                        </p:dataTable> 
                    </p:panel>
                </h:panelGrid>


                <p:spacer height="30" />

                <p:panel id="lst">
                    <f:facet name="header">      
                        <h:outputLabel value="#{staffPaySheetComponentAllPerformanceAllowanceController.paysheetComponent.name}" style="text-transform:capitalize;" />
                        <p:commandButton ajax="false" value="Remove Selected" action="#{staffPaySheetComponentAllPerformanceAllowanceController.removeAll}" style="float: right;" onclick="onSubmitButton();"/>

                    </f:facet>
                    <h:panelGrid columns="2" >
                        <h:outputLabel value="From : " />
                        <p:calendar navigator="true" id="frm" value="#{staffPaySheetComponentAllPerformanceAllowanceController.fromDate}"
                                    pattern="dd MM yyyy hh:mm:ss a" />                                              
                        <h:outputLabel value="Employee : "/>
                        <hr:completeStaff value="#{staffPaySheetComponentAllPerformanceAllowanceController.reportKeyWord.staff}"/>
                        <h:outputLabel value="Department : "/>
                        <hr:department value="#{staffPaySheetComponentAllPerformanceAllowanceController.reportKeyWord.department}"/>
                        <h:outputLabel value="Institution : "/>
                        <hr:institution value="#{staffPaySheetComponentAllPerformanceAllowanceController.reportKeyWord.institution}"/>
                        <h:outputLabel value="Staff Category : "/>
                        <hr:completeStaffCategory value="#{staffPaySheetComponentAllPerformanceAllowanceController.reportKeyWord.staffCategory}"/>
                        <h:outputLabel value="Designation : "/>
                        <hr:completeDesignation value="#{staffPaySheetComponentAllPerformanceAllowanceController.reportKeyWord.designation}"/>
                        <h:outputLabel value="Roster : "/>
                        <hr:completeRoster value="#{staffPaySheetComponentAllPerformanceAllowanceController.reportKeyWord.roster}"/>  


                    </h:panelGrid>

                    <h:panelGrid columns="3">

                        <p:commandButton ajax="false" value="Excel" styleClass="noPrintButton" onclick="onSubmitButton();" >
                            <pe:exporter type="xlsx" target="tb3" fileName="hr_staff_paysheet_component_all_performance_allovance"  />
                        </p:commandButton>
                        <p:commandButton value="Print" ajax="false" action="#" >
                            <p:printer target="perallpanel" ></p:printer>
                        </p:commandButton>
                        <p:commandButton ajax="false" value="Fill" action="#{staffPaySheetComponentAllPerformanceAllowanceController.createStaffPaysheetComponent}" />

                    </h:panelGrid>
                    <p:panel id="perallpanel" styleClass="noBorder summeryBorder">
                        <p:dataTable  value="#{staffPaySheetComponentAllPerformanceAllowanceController.items}" id="tb3"
                                      var="i"  editable="true"
                                      rowStyleClass="#{i.exist eq true ? 'exist':null}"
                                      selection="#{staffPaySheetComponentAllPerformanceAllowanceController.selectedStaffComponent}" 
                                      rowKey="#{i.id}" rowIndexVar="a"  >
                            <f:facet name="header">
                                <h:outputLabel value="Performance Allowance Value"/>
                            </f:facet>
                            <p:ajax event="rowEdit" listener="#{staffPaySheetComponentAllPerformanceAllowanceController.onEdit}" />  

                            <p:column  selectionMode="multiple" styleClass="noPrintButton">                            
                            </p:column>
                            
                            <p:column headerText="No">
                                <f:facet name="header">
                                    <h:outputLabel value="No"/>
                                </f:facet>
                                <h:outputLabel value="#{a+1}" >
                                </h:outputLabel>
                            </p:column>

                            <p:column headerText="Institution" sortBy="#{i.staff.workingDepartment.institution.name}"  >
                                <f:facet name="header" >
                                    <h:outputLabel value="Institution"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.workingDepartment.institution.name}" ></h:outputLabel>
                            </p:column>
                            <p:column headerText="Department" sortBy="#{i.staff.workingDepartment.name}" >
                                <f:facet name="header" >
                                    <h:outputLabel value="Department"  />
                                </f:facet>

                                <h:outputLabel value="#{i.staff.workingDepartment.name}" ></h:outputLabel>
                            </p:column>
                            <p:column headerText="Roster"  >
                                <f:facet name="header">
                                    <h:outputLabel value="Roster"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.roster.name}" ></h:outputLabel>
                            </p:column>
                            <p:column headerText="EMP Code" sortBy="#{i.staff.codeInterger}" >
                                <f:facet name="header">
                                    <h:outputLabel value="EMP Code"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.code}" ></h:outputLabel>
                            </p:column>
                            <p:column headerText="componentType" rendered="false">
                                <f:facet name="header">
                                    <h:outputLabel value="componentType"  />
                                </f:facet>
                                <h:outputLabel value="#{i.paysheetComponent.componentType}"/>
                            </p:column>
                            <p:column headerText="Roster">
                                <h:outputLabel value="#{i.staff.roster.name}"/>
                            </p:column>

                            <p:column headerText="From" >

                                <p:cellEditor>  
                                    <f:facet name="output">
                                        <h:outputLabel value="#{i.fromDate}">
                                            <f:convertDateTime pattern="dd MMMM yyyy"/>
                                        </h:outputLabel>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:calendar navigator="true" value="#{i.fromDate}" pattern="dd MM yyyy"/>
                                    </f:facet>
                                </p:cellEditor>

                            </p:column>
                            
                            <p:column headerText="To" >

                                <p:cellEditor>  
                                    <f:facet name="output">
                                        <h:outputLabel value="#{i.toDate}">
                                            <f:convertDateTime pattern="dd MMMM yyyy"/>
                                        </h:outputLabel>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:calendar navigator="true" value="#{i.toDate}" pattern="dd MM yyyy"/>
                                    </f:facet>
                                </p:cellEditor>


                            </p:column>
                            
                            <p:column headerText="Grade" >
                                <f:facet name="header">
                                    <h:outputLabel value="Grade"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.grade.name}"/>                           
                            </p:column>

                            <p:column headerText="Category" >
                                <f:facet name="header">
                                    <h:outputLabel value="Category"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.staffCategory.name}"/>
                            </p:column>

                            <p:column headerText="Designtion" >
                                <f:facet name="header">
                                    <h:outputLabel value="Designtion"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.designation.name}"/>
                            </p:column>
                            <p:column headerText="Resign Date" >
                                <f:facet name="header">
                                    <h:outputLabel value="Resign Date"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.dateLeft}">
                                    <f:convertDateTime pattern="dd MMMM yyyy"/>
                                </h:outputLabel>
                            </p:column>
                            <p:column headerText="Staff" >
                                <f:facet name="header">
                                    <h:outputLabel value="Staff"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.person.nameWithTitle}"/>
                            </p:column>

                            <p:column headerText="Value" >
                                <p:cellEditor>  
                                    <f:facet name="output">
                                        <h:outputLabel value="#{i.staffPaySheetComponentValue}">
                                            <f:convertNumber pattern="#,##0.00" />
                                        </h:outputLabel>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputText autocomplete="off" value="#{i.staffPaySheetComponentValue}"/>
                                    </f:facet>
                                </p:cellEditor>

                            </p:column>

                            <p:column style="width:6%" styleClass="noPrintButton">  
                                <p:rowEditor />  
                            </p:column>  

                            <p:column style="width:6%" styleClass="noPrintButton">  
                                <p:commandButton ajax="false" value="Remove" action="#{staffPaySheetComponentAllPerformanceAllowanceController.remove}" onclick="onSubmitButton();">
                                    <f:setPropertyActionListener target="#{staffPaySheetComponentAllPerformanceAllowanceController.current}" value="#{i}" />
                                </p:commandButton>
                            </p:column>  


                        </p:dataTable>
                    </p:panel>
                </p:panel>
            </h:form>

        </h:panelGroup>

    </ui:define>

</ui:composition>
